<div class="p-2">
  <h2>Manage my book</h2>
  <hr>
  <div class="alert alert-danger mt-2" role="alert" *ngIf="errorMsg.length">
    <p class="p-0 m-0" *ngFor="let msg of errorMsg">{{msg}}</p>
  </div>
  <div class="d-flex gap-2">
    <div class="col-3">
      <img class="rounded-1" width="100%" height="100%" [src]=" selectedPicture || 'https://source.unsplash.com/user/c_v_r/1900x800'" alt="">
      <div class="mt-2">
        <input
          (change)="onFileSelected($event)"
          class="form-control"
          type="file"
          id="formFile"
          accept="image/*"
        >
      </div>
    </div>
    <div class="col-9">
      <form class="row g-3">
        <div class="col-12">
          <label for="title" class="form-label">Title</label>
          <input [(ngModel)]="bookRequest.title" type="text" class="form-control" id="title" name="title"
                 placeholder="Book title">
        </div>
        <div class="col-md-6">
          <label for="author" class="form-label">Author name</label>
          <input [(ngModel)]="bookRequest.authorName" type="email" class="form-control" id="author" name="author"
                 placeholder="Author name">
        </div>
        <div class="col-md-6">
          <label for="isbn" class="form-label">ISBN</label>
          <input [(ngModel)]="bookRequest.isbn" type="text" class="form-control" id="isbn" name="isbn">
        </div>
        <div class="col-12">
          <label for="synopsis" class="form-label">Synopsis</label>
          <textarea [(ngModel)]="bookRequest.synopsis" rows="4" class="form-control" id="synopsis" name="synopsis"
                    placeholder="1234 Main St"></textarea>
        </div>
        <div class="col-12">
          <div class="form-check">
            <input [(ngModel)]="bookRequest.shareable" class="form-check-input" type="checkbox" id="gridCheck"
                   name="shareable">
            <label class="form-check-label" for="gridCheck">
              Share me
            </label>
          </div>
        </div>
        <div class="d-flex justify-content-end gap-2 col-12">
          <button (click)="saveBook()" type="submit" class="btn btn-outline-primary">
            <i class="fas fa-save"></i>&nbsp;Save
          </button>
          <a routerLink="/books/my-books" type="submit" class="btn btn-link btn text-danger">
            <i class="fas fa-times"></i>&nbsp;Cancel
          </a>
        </div>
      </form>
    </div>
  </div>
</div>
